<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml"
	xmlns:h="http://java.sun.com/jsf/html"
	xmlns:f="http://java.sun.com/jsf/core"
	xmlns:p="http://primefaces.org/ui"
    xmlns:pm="http://primefaces.org/mobile">
    
    <f:view renderKitId="PRIMEFACES_MOBILE" />
    
    <h:head>
        <link type="text/css" rel="stylesheet" href="#{request.contextPath}/css/syntaxhighlighter/syntaxhighlighter.css" />
    </h:head>
    
    <h:body>
        
        <pm:page id="first">
            <pm:header title="Twitter" swatch="b"></pm:header>
            
            <pm:content>
                <h:form id="main">
                    <p:growl id="messages" showDetail="true" />
                    
                    <h2>See what’s happening right now.</h2>
                    <p:inputText id="search" value="#{twitterView.keyword}" type="search" placeholder="Search"/> 
                    
                    <p:commandButton value="Search" icon="search" actionListener="#{twitterView.search}" update="tweets search"/>
                    
                    <p:dataList id="tweets" value="#{twitterView.tweets}" var="tweet" styleClass="ui-listview-inset ui-corner-all">
                        <p:graphicImage value="#{tweet.user.biggerProfileImageURL}" />
                        <h2>#{tweet.user.screenName}</h2>
                        <p>#{tweet.text}</p>
                        <p class="ui-li-aside">Retweets: <strong>#{tweet.retweetCount}</strong></p>
                    </p:dataList>
                </h:form>
                
                <h2>Source</h2>
                <p:accordionPanel activeIndex="-1">
                    <p:tab title="twitter.xhtml">
                        <pre class="brush:xml">
&lt;!DOCTYPE html&gt;
&lt;html xmlns="http://www.w3.org/1999/xhtml"
	xmlns:h="http://java.sun.com/jsf/html"
	xmlns:f="http://java.sun.com/jsf/core"
	xmlns:p="http://primefaces.org/ui"
    xmlns:pm="http://primefaces.org/mobile"&gt;
    
    &lt;f:view renderKitId="PRIMEFACES_MOBILE" /&gt;
    
    &lt;h:head&gt;

    &lt;/h:head&gt;
    
    &lt;h:body&gt;
        
        &lt;pm:page id="first"&gt;
            &lt;pm:header title="Twitter" theme="b"&gt;&lt;/pm:header&gt;
            
            &lt;pm:content&gt;
                &lt;h:form id="main"&gt;
                    &lt;p:growl id="messages" showDetail="true" /&gt;

                    &lt;h2&gt;See what’s happening right now.&lt;/h2&gt;
                    &lt;p:inputText id="search" value="\#{twitterView.keyword}" type="search" placeholder="Search"/&gt; 
                    
                    &lt;p:commandButton value="Search" icon="search" actionListener="\#{twitterView.search}" update="tweets search"/&gt;
                    
                    &lt;p:dataList id="tweets" value="\#{twitterView.tweets}" var="tweet" styleClass="ui-listview-inset ui-corner-all"&gt;
                        &lt;p:graphicImage value="\#{tweet.user.biggerProfileImageURL}" /&gt;
                        &lt;h2&gt;\#{tweet.user.screenName}&lt;/h2&gt;
                        &lt;p&gt;\#{tweet.text}&lt;/p&gt;
                        &lt;p class="ui-li-aside"&gt;Retweets: &lt;strong&gt;\#{tweet.retweetCount}&lt;/strong&gt;&lt;/p&gt;
                    &lt;/p:dataList&gt;
                &lt;/h:form&gt;
                
            &lt;/pm:content&gt;
        &lt;/pm:page&gt;

    &lt;/h:body&gt;
    
&lt;/html&gt;
                        </pre>   
                    </p:tab>
                    <p:tab title="TwitterView.java">
                        <pre class="brush:java">
package org.primefaces.showcase.mobile;

import java.util.List;
import javax.faces.application.FacesMessage;
import javax.faces.bean.ManagedBean;
import javax.faces.context.FacesContext;
import org.primefaces.context.RequestContext;
import twitter4j.Query;
import twitter4j.Status;
import twitter4j.Twitter;
import twitter4j.TwitterException;
import twitter4j.TwitterFactory;

@ManagedBean
public class TwitterView {
    	
	private String keyword;
    
    private List&lt;Status&gt; tweets;

    public String getKeyword() {
        return keyword;
    }
    public void setKeyword(String keyword) {
        this.keyword = keyword;
    }

    public List&lt;Status&gt; getTweets() {
        return tweets;
    }
    public void setTweets(List&lt;Status&gt; tweets) {
        this.tweets = tweets;
    }

    public void search() {
        try {
            Twitter twitter = TwitterFactory.getSingleton();
            Query query = new Query(keyword);
            tweets = twitter.search(query).getTweets();
        } catch(TwitterException exception) {
            FacesMessage msg = new FacesMessage(FacesMessage.SEVERITY_ERROR, "Error", "Please try again");
            FacesContext.getCurrentInstance().addMessage(null, msg);
            RequestContext.getCurrentInstance().update("main:messages");
        }
    }
}
                        </pre>
                    </p:tab>
                </p:accordionPanel>
            </pm:content>
        </pm:page>
        
        <script language="javascript" src="#{request.contextPath}/syntaxhighlighter/scripts/sh.js"></script>
        <script language="javascript">
            SyntaxHighlighter.all();
        </script>
    </h:body>
    
</html>